<script type="text/javascript">
 	window.onload = function() {
 		$("#description-group").hide();

 		$("#link-1").hide();
 		$("#link-2").hide();
 		$("#link-3").hide();

 		initLinkSelector("0");
 	}
 	
 	function initLinkSelector(source) {
 		
 		var optionEmpty = document.createElement("option");
		var optionAppStore = document.createElement("option");
 		optionAppStore.text = "App Store";
		var optionPlayStore = document.createElement("option");
		optionPlayStore.text = "Play Store";
		var optionWinStore = document.createElement("option");
		optionWinStore.text = "Win Store";
		
		var options= [optionEmpty, optionAppStore, optionPlayStore, optionWinStore];
		
 		if (source == "0") {
 	        
 			for	(index = 0; index < options.length; index++) {
    	        document.getElementById('link-option-1').add(options[index]);      	
 	   		}
 			$("#link-1").show();
 	      	       
 	   	} else if (source == "1" 
 	   			&& document.getElementById('link-option-1').selectedIndex != "0") {
 	   			   		
 	   		for	(index = 0; index < options.length; index++) {
 	       		if($("#link-option-1 option:selected" ).text() != options[index].text){
 	    	        document.getElementById('link-option-2').add(options[index]);      	
 	   			}
 	   		}
 	        $("#link-2").show();
 	        
 	   	} else if (source == "1" 
 	   			&& document.getElementById('link-option-1').selectedIndex == "0") {
 	   		
 	   		$("#link-option-2").empty();
 	        $("#link-2").hide();
 	        
 	   	} else if (source == "2" 
 	   			&& document.getElementById('link-option-2').selectedIndex != "0") {
 	   		
 	   		for	(index = 0; index < options.length; index++) {
	       		if($("#link-option-1 option:selected" ).text() != options[index].text
	       				&& $("#link-option-2 option:selected" ).text() != options[index].text){
	    	        document.getElementById('link-option-3').add(options[index]);      	
	   			}
	   		}
 	        $("#link-3").show();
 	        
 	   	} else if (source == "2" 
 	   			&& document.getElementById('link-option-2').selectedIndex == "0") {
 	   		
 	   		$("#link-option-3").empty();
 	        $("#link-3").hide();
 	        
 	   	}
 	}

	function showOrHideDescription() {
    	if (document.getElementById('use-own').checked) {
     		$("#description-group").show();
    	} 
    	else {
     		$("#description-group").hide();
  		}
}
</script>

<form class="pure-form pure-form-stacked" method="post" action="index.php?article_id=9">
    <fieldset>
        <legend>EnterYourApp</legend>
		
		<div class="pure-g">
		
			<div class="pure-u-1-3">
                <label for="name">Name</label>
        		<input id="name" type="text" placeholder="Name" class="pure-input-1"/>
            </div><br />
            
            <div class="pure-u-1-3">
	            <label for="link-1">Links</label>
	            <div id="link-1" class="pure-g"> 
		            <div class="pure-u-1-4">
							<select id="link-option-1" class="pure-input-1" onclick="javascript:initLinkSelector('1');"></select>
		            </div>
		            <div class="pure-u-3-4 ">
						<input id="link-url-1" type="url" placeholder="Url" class="pure-input-1"/>
		            </div>
				</div>
				<div id="link-2" class="pure-g"> 
		            <div class="pure-u-1-4">
							<select id="link-option-2" class="pure-input-1" onclick="javascript:initLinkSelector('2');"></select>
		            </div>
		            <div class="pure-u-3-4 ">
						<input id="link-url-2" type="url" placeholder="Url" class="pure-input-1"/>
		            </div>
				</div>
				<div id="link-3" class="pure-g"> 
		            <div class="pure-u-1-4">
							<select id="link-option-3" class="pure-input-1" onclick="javascript:initLinkSelector('3');"></select>
		            </div>
		            <div class="pure-u-3-4 ">
						<input id="link-url-3" type="url" placeholder="Url" class="pure-input-1"/>
		            </div>
				</div>
			</div>
		</div><br />
       
      	<div class="pure-u-1-3">
	   		<label for="use-store" class="pure-radio">
	        	<input id="use-store" type="radio" name="description" value="use-store" checked onclick="javascript:showOrHideDescription();">
	        	Use description and pictures from store
	    	</label>
       	</div><br />
       	
       	<div class="pure-u-1-3">
	   		<label for="use-own" class="pure-radio">
	        	<input id="use-own" type="radio" name="description" value="use-own" onclick="javascript:showOrHideDescription();">
	        	..Or use a new one!
	    	</label>
       	</div><br />
      	
		<div id="description-group" class="pure-u-1-3">
			<label for="description">Description</label>
	        <textarea id="description" class="pure-input-1"></textarea> 
	        
	        <label for="description">Picture</label>
	        <input type="file" name="picture" id="picture">
       	</div><br />
    	        
        <div class="pure-u-1-3">
			<label for="website">Website</label>
        	<input id="website" type="url" placeholder="Url" class="pure-input-1"/>
       	</div><br />
        
     	<div class="pure-u-1-3">
			<label for="email">Contact Mail Address</label>
        	<input id="email" type="email" placeholder="Email" class="pure-input-1" required/>
       	</div><br />
                
        <button type="submit" class="pure-button pure-button-primary">Save</button>
    </fieldset>
</form>